<!--
 * @Author: your name
 * @Date: 2021-12-30 15:59:25
 * @LastEditTime: 2022-04-27 16:19:59
 * @LastEditors: Please set LastEditors
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 * @FilePath: \agricultural-production-web\src\components\BaseMainSlot\kong.vue
-->
<!--
 * @Description: 插槽最基础布局-简单来说就是画个框框
 * @author:张捉妖师
-->
<template>
  <div class="staff-manage">
    <!-- 添加删除公用组件使用 -->
    <slot name="zhactbar"></slot>
    <!-- <div class="farmtypeselectslot"> -->
    <slot name="farmtypeselectslot"></slot>
    <!-- </div> -->
    <div ref="commonLayout" class="common-layout" :class="nowpage !== 1 ? 'commonHe': ''">
      <!-- 搜索行 -->
      <div v-if="$slots.searchbox" class="search-box">
        <slot name="searchbox"></slot>
      </div>
      <!-- 主要区域 -->
      <div :class="nowpage !== 1 ? 'zhcontents': 'zhcontent'">
        <!-- 其他内容 -->
        <slot name="content"></slot>
        <div class="pagination">
          <slot name="pagination"></slot>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  props: {
    nowpage: {
      type: Number,
      default: 1
    }
  },
  data() {
    return {
      screenHeight: document.body.clientHeight
      // nowpage: 2
    };
  },
  watch: {
    nowpage(val) {
      console.log(val);
    }
    // screenHeight(val) {
    //   // 为了避免频繁触发resize函数导致页面卡顿，使用定时器
    //   if (!this.timer) {
    //     // 一旦监听到的screenWidth值改变，就将其重新赋给data里的screenWidth
    //     this.screenHeight = val
    //     this.timer = true
    //     let that = this
    //     // that.jisuanheight()
    //     setTimeout(function() {
    //       // 打印screenWidth变化的值
    //       that.jisuanheight()
    //       that.timer = false
    //     }, 400)
    //   }
    // }
  },
  mounted() {
    // const that = this
    // window.onresize = () => {
    //   return (() => {
    //     // window.screenHeight = document.body.clientHeight
    //     // that.screenHeight = window.screenHeight
    //     that.screenHeight = document.body.clientHeight
    //   })()
    // }
    // this.jisuanheight()
  },
  methods: {
    // jisuanheight() {
    //   let parent = this.$refs.commonLayout;
    //   parent.style.setProperty("height", '100%');
    //   // 获取元素实际需要占据的高度
    //   let height = parent.scrollHeight
    //   let zhactbar = this.$slots.zhactbar;
    //   if (!zhactbar) {
    //     height = height + 0
    //   } else {
    //     height = height - 100
    //   }
    //   parent.style.setProperty("height", height + 'px');
    //   // 判断是否使用农场类型插槽,动态设置高度
    //   // let searchboxnode = this.$slots.searchbox;
    //   // if (searchboxnode) {
    //   //   parent.style.setProperty("height", height - 40 + 'px');
    //   // } else {
    //   //   parent.style.setProperty("height", height + 'px');
    //   // }
    //   this.getheight()
    // },
    // // 我只是单纯的想拿个高度
    // getheight() {
    //   let parent = this.$refs.commonLayout;
    //   let height = parent.scrollHeight - 180
    //   this.$emit('richheight', height)
    // },
    // // 我只是单纯拿个各宽度
    // getwidth() {
    //   let parent = this.$refs.commonLayout;
    //   let width = parent.scrollWidth
    //   this.$emit('richwidth', width)
    // }
  }
};
</script>
<style scoped lang="scss">
@import "~@/styles/variables.scss";
.staff-manage {
  width: 100%;
  height: 100%;
  // height: calc(100% - 30px);
  // margin-bottom: 10px;
  overflow: hidden;
  position: relative;
  .farmtypeselectslot {
    height: 30px;
  }
  .commonHe {
    height: calc(100% - 34px) !important;
  }
  .common-layout {
    border: 1px solid $borderColor;
    height: 100%;
    padding: 10px;
    overflow: hidden;
    .search-box {
      display: flex;
      align-items: center;
      margin-left: 20px;
      .label-input {
        display: flex;
        align-items: center;
        .label {
          width: 100px;
          white-space: nowrap;
        }
      }
      .search {
        display: flex;
        align-items: center;
        cursor: pointer;
        img {
          height: 30px;
        }
      }
    }
    .zhcontent {
      height: calc(100% - 80px);
      margin: 20px 0 0 0;
      // overflow-y: auto;
      position: relative;
      .pagination {
        position: absolute;
        right: 0px;
        bottom: 20px;
      }
    }
  }
  // 弹出框  统一样式
  ::v-deep .el-dialog__wrapper {
    // background-color: rgba(124, 143, 143, 0);
    .el-dialog {
      background-color: rgba(240, 243, 247, 1);
      // width: 55% !important;
      min-width: 55%;
      border: #000 1px solid;
      border-radius: 9px;
      overflow: hidden;
      color: #000;
      .el-dialog__header {
        width: 100%;
        background-color: rgba(0, 110, 145, 1);
        padding: 15px;
        .el-dialog__title {
          font-weight: 700;
        }
        .el-dialog__close {
          font-size: 22px;
          color: #fff;
          font-weight: 700;
        }
      }
      .el-dialog__body {
        overflow: hidden;
        // overflow-y: auto;
        .el-input__inner {
          color: #000;
          border-color: rgba(217, 217, 217, 1);
          background-color: rgba(255, 255, 255, 1);
        }
        .el-textarea__inner {
          color: #000;
          border-color: rgba(217, 217, 217, 1);
          background-color: rgba(255, 255, 255, 1);
        }
        .el-form {
          display: flex;
          flex-direction: row;
          flex-wrap: wrap;
          justify-content: space-between;
          .total-price {
            color: #000;
          }
          .el-row {
            width: 100%;
            margin-bottom: 10px;
            .el-table {
              max-height: 200px;
              overflow-y: auto;
              background-color: rgba(255, 255, 255, 1);
              .cell {
                color: #000;
              }
              th {
                background-color: rgba(230, 230, 230, 1);
              }
              th.is-leaf {
                border-color: rgba(77, 77, 77, 1);
              }
              td {
                border-color: rgba(77, 77, 77, 1);
              }
              tr:hover {
                background-color: rgba(77, 77, 77, 1);
              }
              .el-table__empty-text {
                color: #000;
              }
              .current-row {
                // background-color: rgb(177, 177, 177);
                background-color: #dbdbdb !important;
              }
              .el-table__row--striped {
                background-color: rgba(255, 255, 255, 1);
              }
              // color: #000;
            }
            .el-table--border {
              border-color: rgba(77, 77, 77, 1);
              border-top-left-radius: 8px;
              border-top-right-radius: 8px;
            }
            .el-table--enable-row-hover .el-table__body tr:hover > td {
              background-color: rgb(177, 177, 177);
            }
            .el-table__body tr.current-row > td {
              background-color: #dbdbdb !important;
            }
            // .el-button {
            //   width: 100%;
            // }
            .el-form {
              // width: 100%;
              // margin: ;
              .el-form-item {
                margin-bottom: 0 !important;
              }
              .el-form-item__content {
                display: flex;
                width: 100%;
                .el-select {
                  min-width: 15%;
                }
                .el-input {
                  min-width: 10%;
                }
                .el-input__inner {
                  border-right: none;
                }
                .el-button {
                  min-width: 5%;
                  margin-left: 10px;
                }
              }
            }
          }
          .el-form-item {
            display: flex;
            .el-form-item__label {
              line-height: 36px;
              min-width: 120px;
              text-align: end;
            }
            .el-form-item__content {
              line-height: 36px;
              width: 100%;
              display: flex;
            }
          }
        }
      }
      .el-dialog__footer {
        width: 100%;
        border-top: 1px solid rgba(191, 191, 191, 1);
        position: inherit;
        text-align: right;
        padding: 15px;
      }
      .el-form-item__label {
        color: #000;
        font-weight: 400;
        font-size: 16px;
      }
    }
  }
}
</style>
